<template>
  <div class="entry-cards-container flex items-center pl-15 pr-4 pt-18">
    <div
      v-for="item in currentEntries"
      :key="item.amountKey"
      class="relative flex flex-col pt-12 pl-12 pb-9 w-214 h-86 mr-12 text-white rounded-6"
      :style="`background-image: linear-gradient(${item.bgLinear});`"
    >
      <div class="text-14 font-bold">{{ item.title }}</div>
      <div class="mt-2 text-11 opacity-[0.7]">{{ item.subTitle }}</div>
      <div class="mt-10 text-11">
        <span
          v-if="
            item.assetType === ASSET_TYPE_ENUM.NO_TRAIN_VIDEO &&
            userAssetDetailData.noTrainFreeVideoBalance > 0
          "
          >不限卡位</span
        >
        <span v-else>剩{{ userAssetDetailData[item.amountKey] || 0 }}卡位</span>
      </div>
      <img
        class="absolute right-0 -top-14 w-84 h-84"
        :alt="item.title"
        :src="`${IMG_CDN_39}/myHuman/${item.imgName}.png`"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ASSET_TYPE_ENUM } from "@/enums";
import { IMG_CDN_39 } from "@/constants";
import { computed, onMounted, ref } from "vue";
import { getUserAssetDetail, UserAssetDetailData } from "@/api/MyHuman";
const props = defineProps({
  activeCategoryId: {
    type: String,
    required: true,
    default: "myHuman"
  }
});
// 提取 ASSET_TYPE_ENUM 的值类型
type AssetTypeEnum = (typeof ASSET_TYPE_ENUM)[keyof typeof ASSET_TYPE_ENUM];
interface EntryItem {
  assetType: AssetTypeEnum;
  title: string;
  subTitle: string;
  imgName: string;
  bgLinear: string;
  amountKey: string;
}
// 各类数字人定制入口渲染数据
const humanEntries: EntryItem[] = [
  {
    assetType: ASSET_TYPE_ENUM.NO_TRAIN_VIDEO,
    title: "极速数字人",
    subTitle: "只需对着镜头说123",
    imgName: "entry_no_train_video",
    bgLinear: "108deg, #4B87FF 0%, #82B9FF 100%",
    amountKey: "noTrainVideoBalance"
  },
  {
    assetType: ASSET_TYPE_ENUM.EXCLUSIVE,
    title: "专属定制口型",
    subTitle: "1:1复刻本人唇齿口型",
    imgName: "entry_exclusive_human",
    bgLinear: "109deg, #A764FF 0%, #C69AFF 100%",
    amountKey: "humanNormalCustomBalance"
  },
  {
    assetType: ASSET_TYPE_ENUM.NORMAL,
    title: "标准通用口型",
    subTitle: "系统生成个性化唇齿口型",
    imgName: "entry_normal_human",
    bgLinear: "109deg, #607EFC 0%, #96A6FF 100%",
    amountKey: "humanNormalBalance"
  },
  {
    assetType: ASSET_TYPE_ENUM.PICTURE,
    title: "照片数字人",
    subTitle: "让照片开口说话",
    imgName: "entry_picture_human",
    bgLinear: "109deg, #30B5F2 0%, #37D1FF 100%",
    amountKey: "humanBalance"
  }
];
// 各类音色定制入口渲染数据
const timbreEntries: EntryItem[] = [
  {
    assetType: ASSET_TYPE_ENUM.TIMBRE,
    title: "极速音色",
    subTitle: "音色效果逼真自然",
    imgName: "entry_speed_timbre",
    bgLinear: "108deg, #4B87FF 0%, #82B9FF 100%",
    amountKey: "timbreBalance"
  },
  {
    assetType: ASSET_TYPE_ENUM.TIMBRE_EXCLUSIVE,
    title: "专属音色",
    subTitle: "1:1复刻本人音色",
    imgName: "entry_exclusive_timbre",
    bgLinear: "109deg, #A764FF 0%, #C69AFF 100%",
    amountKey: "exTimbreBalance"
  }
];
// 根据 activeCategoryId 动态返回对应的 entries 列表
const currentEntries = computed(() => {
  return props.activeCategoryId === "myHuman" ? humanEntries : timbreEntries;
});
// 分类请求列表
const userAssetDetailData = ref<UserAssetDetailData>({
  aiCoinAmount: 0,
  aiCoinBalance: 0,
  exTimbreAmount: 0,
  exTimbreBalance: 0,
  humanAmount: 0,
  humanBalance: 0,
  humanNormalAmount: 0,
  humanNormalBalance: 0,
  humanNormalCustomAmount: 0,
  humanNormalCustomBalance: 0,
  noTrainFreeVideoAmount: 0,
  noTrainFreeVideoBalance: 0,
  noTrainVideoAmount: 0,
  noTrainVideoBalance: 0,
  timbreAmount: 0,
  timbreBalance: 0,
  totalHumanAmount: 0,
  totalHumanBalance: 0,
  videoMakeBalance: 0
});
// 分类请求接口
const getUserAssetDetailPort = async () => {
  userAssetDetailData.value = await getUserAssetDetail();
};

onMounted(() => {
  getUserAssetDetailPort();
});
</script>

<style lang="less" scoped>
.entry-cards-container {
  overflow-x: auto;
  white-space: nowrap;
  // 在移动端（触控设备）隐藏滚动条
  @media (pointer: coarse) {
    &::-webkit-scrollbar {
      display: none;
    }
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  // 在桌面端（精确指针设备）显示滚动条
  @media (pointer: fine) {
    // 可以自定义滚动条样式，或者使用默认样式
    // 如果需要自定义，可以在这里添加
    &::-webkit-scrollbar {
      height: 6px;
      background: transparent;
    }
    &::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 3px;
    }
  }
}

.entry-cards-container > div {
  flex-shrink: 0;
  display: inline-block;
}
</style>
